<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-08-15 16:15:31
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-24 16:52:56
 * @FilePath: \cxl-admin\src\pages\statisticsManage\consume\list\Index.vue
-->
<template>
    <div class="page-box">
        <div class="chart-box" v-permission="['statisticsManage:consume:product']">
            <h1>产品查询量</h1>
            <div class="year">
                <el-date-picker
                    style="width: 100%"
                    v-model="data.currentYear"
                    @change="data.onYearChange"
                    type="year"
                    placeholder="选择年份"
                    format="YYYY"
                    value-format="YYYY"
                />
            </div>
            <div class="chart" id="product"></div>
        </div>
        <div class="chart-box" v-permission="['statisticsManage:consume:city']">
            <h1>各市查询情况</h1>
            <div class="year"></div>
            <div class="chart" id="province"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import StatistiscConsumeData from './index'
import { reactive } from 'vue'
const data = reactive(new StatistiscConsumeData())
</script>

<style scoped lang="scss">
.page-box {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .chart-box {
        width: calc(50% - 8px);
        background-color: #fff;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 16px;
        .year {
            height: 30px;
            margin: 10px 0;
            width: 120px;
        }
    }
    .chart {
        height: 500px;
    }
}
</style>
